<template>
	<div class="admin-main">
		<!-- 顶部统计卡片 -->
		<div class="statistics-cards">
			<el-row :gutter="20">
				<el-col :span="6">
					<el-card shadow="hover" class="stat-card" @click.native="$router.push('/admin/deptDictManagement')">
						<div class="stat-item">
							<div class="stat-icon" style="background: #409EFF;">
								<i class="el-icon-office-building"></i>
							</div>
							<div class="stat-content">
								<div class="stat-value">{{ statistics.deptCount || 0 }}</div>
								<div class="stat-label">科室数量</div>
							</div>
						</div>
					</el-card>
				</el-col>

				<el-col :span="6">
					<el-card shadow="hover" class="stat-card"
						@click.native="$router.push('/admin/diseaseDictManagement')">
						<div class="stat-item">
							<div class="stat-icon" style="background: #67C23A;">
								<i class="el-icon-first-aid-kit"></i>
							</div>
							<div class="stat-content">
								<div class="stat-value">{{ statistics.diseaseCount || 0 }}</div>
								<div class="stat-label">疾病数量</div>
							</div>
						</div>
					</el-card>
				</el-col>

				<el-col :span="6">
					<el-card shadow="hover" class="stat-card"
						@click.native="$router.push('/admin/examItemDictManagement')">
						<div class="stat-item">
							<div class="stat-icon" style="background: #E6A23C;">
								<i class="el-icon-document-checked"></i>
							</div>
							<div class="stat-content">
								<div class="stat-value">{{ statistics.examItemCount || 0 }}</div>
								<div class="stat-label">检查项目</div>
							</div>
						</div>
					</el-card>
				</el-col>

				<el-col :span="6">
					<el-card shadow="hover" class="stat-card" @click.native="$router.push('/admin/drugDictManagement')">
						<div class="stat-item">
							<div class="stat-icon" style="background: #F56C6C;">
								<i class="el-icon-medal"></i>
							</div>
							<div class="stat-content">
								<div class="stat-value">{{ statistics.drugCount || 0 }}</div>
								<div class="stat-label">药品数量</div>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

		<!-- 中间部分：左侧快速操作，右侧系统信息 -->
		<div class="main-content">
			<el-row :gutter="20">
				<!-- 左侧：快速操作 -->
				<el-col :span="16">
					<el-card class="quick-actions" shadow="never">
						<div slot="header" class="card-header">
							<span class="header-title">📋 快速操作</span>
						</div>
						<el-row :gutter="20" class="action-grid">
							<el-col :span="6" v-for="action in quickActions" :key="action.key">
								<div class="action-item" @click="handleQuickAction(action)">
									<div class="action-icon" :style="{background: action.color}">
										<i :class="action.icon"></i>
									</div>
									<div class="action-text">{{ action.text }}</div>
								</div>
							</el-col>
						</el-row>
					</el-card>

					<!-- 最近活动 -->
					<el-card class="recent-activities" shadow="never">
						<div slot="header" class="card-header">
							<span class="header-title">🕐 最近活动</span>
						</div>
						<el-timeline>
							<el-timeline-item v-for="(activity, index) in recentActivities" :key="index"
								:timestamp="activity.time" placement="top" :type="activity.type">
								<div class="activity-item">
									<div class="activity-content">{{ activity.content }}</div>
									<div class="activity-user">{{ activity.user }}</div>
								</div>
							</el-timeline-item>
						</el-timeline>
					</el-card>
				</el-col>

				<!-- 右侧：系统信息和待办事项 -->
				<el-col :span="8">
					<!-- 系统信息 -->
					<el-card class="system-info" shadow="never">
						<div slot="header" class="card-header">
							<span class="header-title">⚙️ 系统信息</span>
						</div>
						<div class="info-item">
							<span class="info-label">系统版本</span>
							<span class="info-value">{{ systemInfo.version }}</span>
						</div>
						<div class="info-item">
							<span class="info-label">最后更新</span>
							<span class="info-value">{{ systemInfo.lastUpdate }}</span>
						</div>
						<div class="info-item">
							<span class="info-label">管理员</span>
							<span class="info-value">{{ systemInfo.adminName }}</span>
						</div>
						<div class="info-item">
							<span class="info-label">登录时间</span>
							<span class="info-value">{{ this.$store.state.user.lastLoginTime }}</span>
						</div>
					</el-card>

					<!-- 快捷链接 -->
					<el-card class="quick-links" shadow="never">
						<div slot="header" class="card-header">
							<span class="header-title">🔗 快捷链接</span>
						</div>
						<div class="link-items">
							<div v-for="link in quickLinks" :key="link.key" class="link-item"
								@click="$router.push(link.route)">
								<i :class="link.icon" class="link-icon"></i>
								<span class="link-text">{{ link.text }}</span>
								<i class="el-icon-arrow-right link-arrow"></i>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import http from '../../utils/request'

	export default {
		name: 'AdminMain',
		data() {
			return {
				// 统计数据
				statistics: {
					deptCount: 0,
					diseaseCount: 0,
					examItemCount: 0,
					drugCount: 0,
					userCount: 0,
				},

				// 快速操作
				quickActions: [{
						key: 'addDept',
						text: '新增科室',
						icon: 'el-icon-office-building',
						color: '#409EFF',
						route: '/admin/deptDictManagement',
						query: {
							action: 'add'
						}
					},
					{
						key: 'addDisease',
						text: '新增疾病',
						icon: 'el-icon-first-aid-kit',
						color: '#67C23A',
						route: '/admin/diseaseDictManagement',
						query: {
							action: 'add'
						}
					},
					{
						key: 'addExam',
						text: '新增检查',
						icon: 'el-icon-document-checked',
						color: '#E6A23C',
						route: '/admin/examItemDictManagement',
						query: {
							action: 'add'
						}
					},
					{
						key: 'addDrug',
						text: '新增药品',
						icon: 'el-icon-medal',
						color: '#F56C6C',
						route: '/admin/drugDictManagement',
						query: {
							action: 'add'
						}
					},
					{
						key: 'manageDept',
						text: '科室管理',
						icon: 'el-icon-office-building',
						color: '#409EFF',
						route: '/admin/deptDictManagement'
					},
					{
						key: 'manageDisease',
						text: '疾病管理',
						icon: 'el-icon-first-aid-kit',
						color: '#67C23A',
						route: '/admin/diseaseDictManagement'
					},
					{
						key: 'manageExam',
						text: '检查项目管理',
						icon: 'el-icon-document-checked',
						color: '#E6A23C',
						route: '/admin/examItemDictManagement'
					},
					{
						key: 'manageDrug',
						text: '药品管理',
						icon: 'el-icon-medal',
						color: '#F56C6C',
						route: '/admin/drugDictManagement'
					}
				],

				recentActivities: [],

				// 系统信息
				systemInfo: {
					version: 'BlockChainEMR v2.0.1',
					lastUpdate: new Date().toISOString().split('T')[0],
					adminName: '系统管理员'
				},

				// 快捷链接
				quickLinks: [{
						key: 'dept',
						text: '科室字典管理',
						icon: 'el-icon-office-building',
						route: '/admin/deptDictManagement'
					},
					{
						key: 'disease',
						text: '疾病字典管理',
						icon: 'el-icon-first-aid-kit',
						route: '/admin/diseaseDictManagement'
					},
					{
						key: 'exam',
						text: '检查项目字典管理',
						icon: 'el-icon-document-checked',
						route: '/admin/examItemDictManagement'
					},
					{
						key: 'drug',
						text: '药品字典管理',
						icon: 'el-icon-medal',
						route: '/admin/drugDictManagement'
					}
				]
			}
		},

		async created() {
			await this.loadStatistics()
			this.recentActivities = await this.getRecentActivities();
		},

		methods: {
			// 加载统计数据
			async loadStatistics() {
				try {
					const response = await http.get('/admin/getStatistics')
					if (response.data.code === 1) {
						this.statistics = response.data.data
					} else {
						console.error('获取统计信息失败:', response.data.msg)
						// 使用默认值
						this.setDefaultStatistics()
					}
				} catch (error) {
					console.error('获取统计信息失败:', error)
					// 使用默认值
					this.setDefaultStatistics()
				}
			},
			async getRecentActivities(){
	
				const resp = await http.get("/admin/getRecentActivitiesResult");
				return resp.data.data;
			},

			// 设置默认统计值
			setDefaultStatistics() {
				this.statistics = {
					deptCount: 8,
					diseaseCount: 24,
					examItemCount: 45,
					drugCount: 156,
					userCount: 32,
				}
			},

			// 处理快速操作
			handleQuickAction(action) {
				if (action.route) {
					if (action.query) {
						this.$router.push({
							path: action.route,
							query: action.query
						})
					} else {
						this.$router.push(action.route)
					}
				}
			}
		}
	}
</script>

<style scoped>
	.admin-main {
		padding: 20px;
		background: #f0f2f5;
		min-height: calc(100vh - 60px);
	}

	/* 统计卡片样式 */
	.statistics-cards {
		margin-bottom: 20px;
	}

	.stat-card {
		cursor: pointer;
		transition: all 0.3s ease;
		border-radius: 8px;
		border: none;
	}

	.stat-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	}

	.stat-item {
		display: flex;
		align-items: center;
		padding: 10px 0;
	}

	.stat-icon {
		width: 60px;
		height: 60px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15px;
		color: white;
		font-size: 24px;
	}

	.stat-content {
		flex: 1;
	}

	.stat-value {
		font-size: 28px;
		font-weight: bold;
		color: #303133;
		line-height: 1.2;
	}

	.stat-label {
		font-size: 14px;
		color: #909399;
		margin-top: 5px;
	}

	/* 主要内容区域 */
	.main-content {
		margin-bottom: 20px;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #ebeef5;
	}

	.header-title {
		font-size: 16px;
		font-weight: 600;
		color: #303133;
	}

	/* 快速操作 */
	.action-grid {
		padding: 10px 0;
	}

	.action-item {
		text-align: center;
		padding: 20px 10px;
		cursor: pointer;
		transition: all 0.3s ease;
		border-radius: 8px;
		margin-bottom: 10px;
	}

	.action-item:hover {
		background-color: #f5f7fa;
		transform: translateY(-3px);
	}

	.action-icon {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 10px;
		color: white;
		font-size: 22px;
	}

	.action-text {
		font-size: 14px;
		color: #606266;
		font-weight: 500;
	}

	/* 最近活动 */
	.recent-activities {
		margin-top: 20px;
	}

	.activity-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.activity-content {
		flex: 1;
		color: #303133;
	}

	.activity-user {
		color: #909399;
		font-size: 12px;
		margin-left: 10px;
	}

	/* 系统信息 */
	.system-info {
		margin-bottom: 20px;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-label {
		color: #606266;
		font-size: 14px;
	}

	.info-value {
		color: #303133;
		font-weight: 500;
		font-size: 14px;
	}

	/* 快捷链接 */
	.link-items {
		padding: 10px 0;
	}

	.link-item {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		cursor: pointer;
		border-radius: 6px;
		transition: all 0.3s;
		margin-bottom: 8px;
	}

	.link-item:hover {
		background-color: #f5f7fa;
		transform: translateX(5px);
	}

	.link-item:last-child {
		margin-bottom: 0;
	}

	.link-icon {
		width: 24px;
		text-align: center;
		margin-right: 10px;
		color: #409EFF;
		font-size: 16px;
	}

	.link-text {
		flex: 1;
		color: #303133;
		font-size: 14px;
	}

	.link-arrow {
		color: #909399;
		font-size: 12px;
		transition: transform 0.3s;
	}

	.link-item:hover .link-arrow {
		transform: translateX(3px);
		color: #409EFF;
	}

	/* 响应式调整 */
	@media (max-width: 1200px) {
		.action-grid .el-col {
			margin-bottom: 15px;
		}
	}

	@media (max-width: 768px) {
		.statistics-cards .el-col {
			margin-bottom: 15px;
		}

		.main-content .el-col {
			margin-bottom: 15px;
		}

		.action-grid .el-col {
			margin-bottom: 15px;
		}
	}
</style>